<template>
  <view class="container">
    <view class="header">
      <text class="title">收益统计</text>
    </view>
    
    <!-- 统计卡片 -->
    <view class="stats-cards">
      <view class="stat-card">
        <text class="stat-label">昨日收益</text>
        <text class="stat-value">¥{{ yesterdayEarnings }}</text>
      </view>
      <view class="stat-card">
        <text class="stat-label">本月收益</text>
        <text class="stat-value">¥{{ monthEarnings }}</text>
      </view>
      <view class="stat-card">
        <text class="stat-label">累计收益</text>
        <text class="stat-value">¥{{ totalEarnings }}</text>
      </view>
    </view>
    
    <!-- 日期筛选 -->
    <view class="date-filter">
      <view class="filter-item">
        <text class="filter-label">开始日期</text>
        <picker mode="date" :value="startDate" @change="onStartDateChange">
          <view class="date-picker">{{ startDate || '请选择' }}</view>
        </picker>
      </view>
      <view class="filter-item">
        <text class="filter-label">结束日期</text>
        <picker mode="date" :value="endDate" @change="onEndDateChange">
          <view class="date-picker">{{ endDate || '请选择' }}</view>
        </picker>
      </view>
      <button class="search-btn" @click="searchEarnings">查询</button>
    </view>
    
    <!-- 收益列表 -->
    <view class="earnings-list">
      <view class="list-header">
        <text class="header-title">收益明细</text>
      </view>
      <view v-if="earningsList.length === 0" class="empty-state">
        <image src="/static/images/noData.png" class="empty-img" />
        <text class="empty-text">暂无收益记录</text>
      </view>
      <view v-else>
        <view v-for="item in earningsList" :key="item.id" class="earnings-item">
          <view class="item-info">
            <text class="date">{{ item.earningDate }}</text>
            <text class="orders">完成订单：{{ item.totalOrders }}单</text>
          </view>
          <view class="item-amount">
            <text class="amount">¥{{ item.totalEarnings }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <view v-if="hasMore" class="load-more" @click="loadMore">
      <text class="load-text">{{ loading ? '加载中...' : '加载更多' }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import { getYesterdayEarnings, getTotalEarnings, getEarningsStatistics, getEarningsRecords } from '@/api/earnings'

const userStore = useUserStore()

// 统计数据
const yesterdayEarnings = ref('0.00')
const monthEarnings = ref('0.00')
const totalEarnings = ref('0.00')

// 筛选条件
const startDate = ref('')
const endDate = ref('')

// 列表数据
const earningsList = ref([])
const loading = ref(false)
const hasMore = ref(true)
const pageNo = ref(1)
const pageSize = 20

// 初始化日期（默认查询最近30天）
const initDates = () => {
  const today = new Date()
  const thirtyDaysAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)
  
  endDate.value = today.toISOString().split('T')[0]
  startDate.value = thirtyDaysAgo.toISOString().split('T')[0]
}

// 加载统计数据
const loadStatsData = async () => {
  try {
    if (!userStore.deliveryId) return
    
    const [yesterdayRes, totalRes] = await Promise.all([
      getYesterdayEarnings(userStore.deliveryId),
      getTotalEarnings(userStore.deliveryId)
    ])
    
    yesterdayEarnings.value = yesterdayRes.data || '0.00'
    totalEarnings.value = totalRes.data || '0.00'
    
    // 获取收益统计数据（包含本月收益）
    const statsRes = await getEarningsStatistics(userStore.deliveryId)
    if (statsRes.data) {
      monthEarnings.value = statsRes.data.monthEarnings || '0.00'
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
    uni.showToast({ title: '加载数据失败', icon: 'none' })
  }
}

// 加载收益列表
const loadEarningsList = async (reset = false) => {
  if (loading.value) return
  
  try {
    loading.value = true
    
    if (reset) {
      pageNo.value = 1
      earningsList.value = []
      hasMore.value = true
    }
    
    const params = {
      deliveryId: userStore.deliveryId,
      startDate: startDate.value,
      endDate: endDate.value,
      pageNo: pageNo.value,
      pageSize
    }
    
    const {data} = await getEarningsRecords(params)
    
    if (data?.list) {
      if (reset) {
        earningsList.value = data.list
      } else {
        earningsList.value.push(...data.list)
      }
      
      hasMore.value = earningsList.value.length < data.total
      if (data.list.length > 0) {
        pageNo.value++
      }
    }
  } catch (error) {
    console.error('加载收益列表失败:', error)
    uni.showToast({ title: '加载列表失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

// 日期选择
const onStartDateChange = (e) => {
  startDate.value = e.detail.value
}

const onEndDateChange = (e) => {
  endDate.value = e.detail.value
}

// 查询收益
const searchEarnings = () => {
  if (!startDate.value || !endDate.value) {
    uni.showToast({ title: '请选择查询日期', icon: 'none' })
    return
  }
  
  if (new Date(startDate.value) > new Date(endDate.value)) {
    uni.showToast({ title: '开始日期不能大于结束日期', icon: 'none' })
    return
  }
  
  loadEarningsList(true)
}

// 加载更多
const loadMore = () => {
  if (!loading.value && hasMore.value) {
    loadEarningsList()
  }
}



onMounted(async () => {
  initDates()
  await loadStatsData()
  await loadEarningsList(true)
})
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 收益概览卡片 */
.earnings-overview {
  background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  color: white;
  box-shadow: 0 8rpx 30rpx rgba(0, 122, 255, 0.3);
}

.overview-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.overview-row:last-child {
  margin-bottom: 0;
}

.overview-item {
  text-align: center;
  flex: 1;
}

.overview-label {
  font-size: 26rpx;
  opacity: 0.8;
  margin-bottom: 10rpx;
  display: block;
}

.overview-value {
  font-size: 40rpx;
  font-weight: bold;
  display: block;
}

/* 筛选区域 */
.filter-section {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.filter-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.date-picker-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.date-picker {
  flex: 1;
  padding: 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
}

.date-separator {
  margin: 0 20rpx;
  font-size: 28rpx;
  color: #666;
}

.filter-actions {
  display: flex;
  gap: 20rpx;
}

.filter-btn {
  flex: 1;
  padding: 20rpx;
  border-radius: 10rpx;
  text-align: center;
  font-size: 28rpx;
  border: none;
}

.query-btn {
  background-color: #007AFF;
  color: white;
}

.reset-btn {
  background-color: #f0f0f0;
  color: #666;
}

/* 收益列表 */
.earnings-list {
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.list-header {
  background-color: #f8f9fa;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #e0e0e0;
}

.list-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.earnings-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.earnings-item:last-child {
  border-bottom: none;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.item-date {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.item-amount {
  font-size: 32rpx;
  font-weight: bold;
  color: #007AFF;
}

.item-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-orders {
  font-size: 26rpx;
  color: #666;
}

.transfer-status {
  font-size: 24rpx;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  display: inline-block;
}

.transfer-status.pending {
  background-color: #f0f0f0;
  color: #666;
}

.transfer-status.processing {
  background-color: #fff3cd;
  color: #856404;
}

.transfer-status.completed {
  background-color: #d4edda;
  color: #155724;
}

.transfer-status.failed {
  background-color: #f8d7da;
  color: #721c24;
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 30rpx;
  margin-top: 20rpx;
}

.load-text {
  font-size: 28rpx;
  color: #007AFF;
}
</style>

<style lang="scss">
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0;
}

.header {
  padding: 60rpx 30rpx 40rpx;
  text-align: center;
}

.title {
  font-size: 44rpx;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.stats-cards {
  display: flex;
  justify-content: space-between;
  margin: 0 30rpx 30rpx;
  gap: 16rpx;
}

.stat-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  padding: 32rpx 20rpx;
  text-align: center;
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.stat-label {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.stat-value {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.date-filter {
  margin: 0 30rpx 30rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.filter-item {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.filter-label {
  width: 140rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

.date-picker {
  flex: 1;
  padding: 24rpx;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #333;
  border: 2rpx solid rgba(102, 126, 234, 0.1);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.search-btn {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 16rpx;
  font-size: 30rpx;
  font-weight: 600;
  height: 88rpx;
  line-height: 88rpx;
  margin-top: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
  border: none;
}

.earnings-list {
  margin: 0 30rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.list-header {
  padding: 32rpx;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
}

.empty-img {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 24rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  font-weight: 500;
}

.earnings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease;
}

.earnings-item:last-child {
  border-bottom: none;
}

.earnings-item:active {
  background-color: rgba(102, 126, 234, 0.03);
}

.item-info {
  flex: 1;
}

.date {
  display: block;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 8rpx;
  font-weight: 600;
}

.orders {
  display: block;
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
}

.item-amount {
  text-align: right;
}

.amount {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}



.load-more {
  text-align: center;
  padding: 40rpx 0;
  margin: 20rpx 30rpx 0;
}

.load-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}
</style>